HTML5는 WeChat 자위 game_html5 튜토리얼 기술을 구현합니다.

html5는 위챗의 자위 게임을 구현한 것입니다. HTML5를 배우기 위한 미니 게임입니다.

코드 복사

코드는 다음과 같습니다.

// JavaScript 문서
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");

// 게임의 시간을 기록하는데 사용되며 뒤로 갈수록 더 빠르게
var time1 = 0;
var time2 = 80;

// 포인트
var jifen = 0;

function getSudu(){
var number =parseInt(Math.random()*10);
if(number < 5 && number > 0){
숫자 반환
}
반환 1;
}
//항공기 객체
function flivverObj(hp,ewidth,eheight,eimg,esudu){
//Random X
this.x = parsInt(Math.random()*460 1);
this.y = 0;
// HP
this.hp = hp;
// 패배
this.hit = 0;
// 죽을지
this.over = 0;

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

//항공기 가져오기
function getFlivver(type){
switch(type){
사례 1 :
새 flivverObj(100,50,30,flivver1,getSudu()) 반환;
사례 2:
새 flivverObj(500,70,90,flivver2,getSudu()) 반환;
사례 3:
새로운 flivverObj(1000,110,170,flivver3,getSudu()) 반환;
}
}
함수 카트리지(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('똥같은 놈').hide().fadeIn(1000,function(){
$(this ).html ('너 쓰레기야
' jifen 'fen ') .hide().fadeIn();
});
});
}

(function(cxt){
var dotu = {nums:0} ;
// 소형 항공기를 보관하는 데 사용됩니다
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 Cartridges = 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();
// 배경 설정
dotu.setBg() ;
// 작은 비행기 설정
dotu.setFlivver();
// 자신을 그려보세요
dotu.setMe();
// 글머리 기호
dotu.cartridge() ;


cxt.font = "기울임꼴 20px Microsoft Yahei";
cxt.스트로크텍스트("포인트:" jifen, 10, 30);

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

dotu.setTimes = function(){
time1 ;
// 100초에 1단 기어
if(time1 == 1000){
time1 = 0;
시간2 = (시간2 == 20) ? 20 : 시간2 - 20;
}

}


/**
* 움직이는 배경 설정
*/
dotu .setBg = function(){
dotu.nums ;
if(dotu.nums == 800){
dotu.nums = 0
}
// 캔버스 배경
cxt.drawImage(img,0,dotu.nums,480,800);
cxt.drawImage(img,0,dotu.nums - 800,480,800);
}

dotu.setFlivver = 함수 ( ){
// 항공기 생성
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;
// 화면을 벗어나면 작은 평면을 삭제합니다
if(flivver[a].y > 780){
flivver.splice(a, 1);
}
// 캔버스에 작은 비행기를 그립니다


// 작은 비행기가 죽습니다
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);
// 사망 여부 확인
if( me.x > (flivver[a].x - flivver[a ].너비 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--;
}
}

}
}

// 자신의 거리 업데이트
dotu.setMe = function(){
cxt.drawImage(meImg,me.x,me. y ,64,72);
}

// 글머리 기호 메서드 업데이트
dotu.cartridge = function(){
if(dotu.nums % 10 == 0){
Cartridges.push(new Cartridge(me.x 30,me.y));
}

for(i in Cartridges){
// OBJ가 맨 위에 도달하면 삭제
if(cartridges[i].y < 0){
카트리지.splice(i, 1);
계속;
}


카트리지[i].y -= 20;
// 캔버스에 작은 비행기를 그립니다.
cxt.drawImage(cartridgeImg,cartridges[i].x,cartridges[i].y,7,17);

// 총알이 항공기에 맞은 상황
for(j in flivver){
if(flivver[j].over > 0){
continue;
}
if( 카트리지[ i].x > flivver[j].x && 카트리지[i].x < flivver[j].x flivver[j].width && 카트리지[i].y > && 카트리지 [i].y -flivver[j].height < flivver[j].y){

flivver[j].hit = 10;
$('#isdz'). html( '숫자 누르기' j);

if(flivver[j].hp > 1){
flivver[j].hp -= 80;
}else{
flivver[j].over = 40;
jifen = 50000;
}
// 총알이 사라집니다
Cartridges.splice(i, 1);
break;
}
}
}
}

// 마우스 이벤트 바인딩
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);

코드 복사

코드는 다음과 같습니다.

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