Heim > Web-Frontend > H5-Tutorial > Hauptteil

HTML5 implementiert WeChat-Masturbationsspiel_html5-Tutorialfähigkeiten

WBOY
Freigeben: 2016-05-16 15:48:21
Original
1703 Leute haben es durchsucht

html5 implementiert das Masturbationsspiel von WeChat. Dies ist eine Richtung für die Entwicklung von WEB

Code kopieren
Der Code lautet wie folgt:

// JavaScript-Dokument
var c = document.getElementById("dotu");
var cxt = c.getContext("2d");
var img = newImg(". /assets/bg_01.jpg");
var fps;
cxt.drawImage(img,0,0,480,800);

var flivverLog = 0;
var flivver1 = newImg(". /assets/flivver.png");
var flivver2 = newImg("./assets/flivver2.png");
var flivver3 = newImg("./assets/flivver3.png");

// Wird verwendet, um die Zeit des Spiels aufzuzeichnen, je schneller es nach hinten geht
var time1 = 0;
var time2 = 80;

// Punkte
var jifen = 0;

function getSudu(){
var number = parseInt(Math.random()*10);
if(number < 5 && number > 0){
return number;
}
return 1;
}
//Aircraft object
function flivverObj(hp,ewidth,eheight,eimg,esudu){
//Random X
this.x = parseInt(Math.random()*460 1);
this.y = 0;
// HP
this.hp = hp;
// Geschlagen
this.hit = 0;
// Ob sterben soll
this.over = 0;

this.width = ewidth;
this.height = ehight;
this. img = eimg;
this.sudu = esudu;
}

//Holen Sie sich das Flugzeug
Funktion getFlivver(type){
switch(type){
Fall 1 :
return new flivverObj(100,50,30,flivver1,getSudu());
case 2:
return new flivverObj(500,70,90,flivver2,getSudu());
Fall 3:
return new flivverObj(1000,110,170,flivver3,getSudu());
}
}
functioncartridge(x,y){
this.x = x;
this .y = y;
}

function gameover(){
window.clearTimeout(fps);
//$('#dotu').fadeOut();
$('.content').css('position','relative');
$('.content').append('');
$('#sil').html(' you') .hide().fadeIn(1000,function(){
$(this).html('You shit').hide().fadeIn(1000,function(){
$(this ).html ('Du bist Scheiße
' jifen 'fen ') .hide().fadeIn();
});
});
}

(function(cxt){
var dotu = {nums:0} ;
// Wird zum Speichern kleiner Flugzeuge verwendet
var flivver = new Array();
var flivverImg = newImg("./assets/flivver.png");
// Self
var me = {x:240,y:750};
var meImg = newImg('assets/me.png');
// Bullets
var Patronen = new Array();
var cartridgeImg = newImg('./assets/cartridge.png');

var boo1 = newImg('./assets/boo1.png');
var over = newImg('./assets /over .png');
//
dotu.update = function(){

dotu.setTimes();
// Hintergrund festlegen
dotu.setBg() ;
// Baue das kleine Flugzeug auf
dotu.setFlivver();
// Zeichne dich selbst
dotu.setMe();
// Kugeln
dotu.cartridge() ;


cxt.font = "italic 20px Microsoft Yahei";
cxt.StrokeText("Points:" jifen, 10, 30);

$('#fjs '). html(flivver.length);
$('#zds').html(cartridges.length);
$('#scfj').html("1000/" time2 " Millisekunden") ;
}

dotu.setTimes = function(){
time1 ;
// 1 Gang in 100 Sekunden
if(time1 == 1000){
time1 = 0;
time2 = (time2 == 20) ? 20 : time2 - 20;
}

}

/**
* Beweglichen Hintergrund festlegen
*/
dotu .setBg = function(){
dotu.nums ;
if(dotu.nums == 800){
dotu.nums = 0;
}
// Canvas-Hintergrund
cxt.drawImage(img,0,dotu.nums,480,800);
cxt.drawImage(img,0,dotu.nums - 800,480,800);
}

dotu.setFlivver = function ( ){
// Flugzeug generieren
if(dotu.nums % time2 == 0){
flivverLog ;
if(flivverLog % 6 == 0){
flivver.push( getFlivver (2));
}else if(flivverLog % 13 == 0){
flivver.push(getFlivver(3));
}else{
flivver.push(getFlivver(1 ) );
}

}

for(a in flivver){



flivver[a].y = flivver[a] . sudu;
// Wenn es über den Bildschirm hinausgeht, lösche das kleine Flugzeug
if(flivver[a].y > 780){
flivver.splice(a, 1);
}
// Zeichne das kleine Flugzeug auf die Leinwand


// Das kleine Flugzeug stirbt
if(flivver[a].over > 0){
flivver[a ] .over --;

if(flivver[a].over > 20){
cxt.drawImage(boo1,flivver[a].x flivver[a].width/2 - 20 , flivver[a].y flivver[a].height / 2 -10,41,39);
}else if(flivver[a].over > 2){
cxt.drawImage(over, flivver [a].x flivver[a].width/2 - 20 ,flivver[a].y flivver[a].height / 2 -10,40,43);
}else{
flivver. splice (a, 1);
}



}else{
cxt.drawImage(flivver[a].img,flivver[a].x,flivver[a ] .y,flivver[a].width,flivver[a].height);
// Bestimmen Sie, ob Sie tot sind
if( me.x > (flivver[a].x - flivver[a ]. width 20) && (me.x) <(flivver[a].x flivver[a].width - 20) && (me.y) <(flivver[a].y flivver[a].height 20) && (me.y 72) > (flivver[a].y - 20)){
gameover();
}

if(flivver[a].hit > 0) {
cxt.drawImage(boo1,flivver[a].x flivver[a].width/2 - 20 ,flivver[a].y flivver[a].height / 2 -10,41,39) ;
//cxt.drawImage(boo1,flivver[a].x 5,flivver[a].y,41,39);
flivver[a].hit--;
}
}

}
}

// Eigenen Abstand aktualisieren
dotu.setMe = function(){
cxt.drawImage(meImg,me.x,me. y ,64,72);
}

// Aufzählungsmethode aktualisieren
dotu.cartridge = function(){
if(dotu.nums % 10 == 0){
Patronen.push(neue Patrone(me.x 30,me.y));
}

for(i in Patronen){
// OBJ löschen, wenn es oben angekommen ist
if(cartridges[i].y < 0){
cartridges.splice(i, 1);
continue;
}


cartridges[i].y -= 20;
// Zeichne das kleine Flugzeug auf die Leinwand
cxt.drawImage(cartridgeImg,cartridges[i].x,cartridges[i].y,7,17);

// Die Situation, wenn die Kugel das Flugzeug trifft
for(j in flivver){
if(flivver[j].over > 0){
continue;
}
if( Patronen[i].x > Flivver[j].x < Flivver[j].x Flivver[j].y > && Patronen [i].y -flivver[j].height < flivver[j].y){

flivver[j].hit = 10;
$('#isdz'). html( 'Hit the number' j);

if(flivver[j].hp > 1){
flivver[j].hp -= 80;
}else{
flivver[j].over = 40;
jifen = 50000;
}
// Die Kugel verschwindet
cartridges.splice(i, 1);
break;
}
}
}
}

// Mausereignis binden
c.addEventListener('mousemove', function onMouseMove(evt) {
me.x = evt.layerX - $('#dotu').offset().left - 32;
me.y = evt.layerY - 36;
$('#sbX').html(me.x);
$('#sbY').html(me.y);
});

fps = setInterval(dotu.update, 1000/100);
}(cxt))


function newImg(src){
var obj = new Image();
obj.src = src;
return obj;
}

/ /setInterval(h.update, 1000/65);


Code kopieren
Der Code lautet wie folgt:


http://www.w3 .org/1999/xhtml">

打飞机 - 多途


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!