给小朋友做的一个很简单的游戏

按上下左右键，或触摸方式，控制植物战士消灭僵尸。
在电脑、手机、平板上都可以玩。
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
<body>
	<div id="info">ttt</div>
<script>
	var info = document.getElementById("info");
	info.innerHTML = window.screen.width+","+window.screen.height;
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = window.screen.width-20;
    canvas.height = window.screen.height-200;
    document.body.appendChild(canvas);

    var hero = {
    	  ready : false,
        speed: 100, // 每秒移动的像素
        x: 0,y: 0,w:80,h:80,
        oldx: 0,oldy: 0
    };
    var monster = {
    	  ready : false,
    	  isDrawed: false,
        x: 0,y: 0,w:45,h:45
    };
    
    var heroImage = new Image();
    heroImage.src = "wandou.jpg";
    heroImage.onload = function () {
        hero.ready = true;
    };

    var monsterImage = new Image();
    monsterImage.src = "jiangshi.jpg";
    monsterImage.onload = function () {
        monster.ready = true;
    };
        

    // 处理按键
    var keysDown = {};
    addEventListener("keydown", function (e) {
        keysDown[e.keyCode] = true;
    }, false);
    addEventListener("keyup", function (e) {
        delete keysDown[e.keyCode];
    }, false);
    document.addEventListener('touchstart',touch, false);
    document.addEventListener('touchmove',touch, false);
    document.addEventListener('touchend',touch, false);
     
    var touchX=0,touchY=0;
    function touch (event){
        var event = event || window.event;
        
        switch(event.type){
            case "touchstart":
                touchX=event.touches[0].clientX;
                touchY=event.touches[0].clientY;
                info.innerHTML = "Touch started (" + Math.round(touchX) + "," + Math.round(touchY) + ")";
                break;
            case "touchend":
                delete keysDown[37];delete keysDown[38];delete keysDown[39];delete keysDown[40];
info.innerHTML = "Touch end (" + Math.round(event.changedTouches[0].clientX) + "," + Math.round(event.changedTouches[0].clientY) + ")";
                break;
            case "touchmove":
                event.preventDefault();
                delete keysDown[37];delete keysDown[38];delete keysDown[39];delete keysDown[40];
                if(event.touches[0].clientX > touchX){
                	keysDown[39] = true;// 用户按的是→
                }
                if(event.touches[0].clientX < touchX){
                	keysDown[37] = true;// 用户按的是→
                }
                if(event.touches[0].clientY > touchY){
                	keysDown[40] = true;// 用户按的是↓
                }
                if(event.touches[0].clientY < touchY){
                	keysDown[38] = true;// 用户按的是↑
                }
                touchX=event.touches[0].clientX;
                touchY=event.touches[0].clientY;
                info.innerHTML = "Touch moved (" + Math.round(touchX) + "," + Math.round(touchY) + ")";               
                break;
        }  
    }
    // 更新游戏对象的属性
    var count = 0
    var update = function (modifier) {
        if (38 in keysDown) { // 用户按的是↑
            hero.y -= hero.speed * modifier;
        }
        if (40 in keysDown) { // 用户按的是↓
            hero.y += hero.speed * modifier;
        }
        if (37 in keysDown) { // 用户按的是←
            hero.x -= hero.speed * modifier;
        }
        if (39 in keysDown) { // 用户按的是→
            hero.x += hero.speed * modifier;
        }
        if(hero.x < 0) hero.x=0;
        if(hero.x > canvas.width - hero.w)  hero.x = canvas.width - hero.w
        if(hero.y < 0) hero.y=0;
        if(hero.y > canvas.height - hero.h)  hero.y = canvas.height - hero.h
        if(count++%100==0){
            monster.x = 32 + (Math.random() * (canvas.width - 64));
            monster.y = 32 + (Math.random() * (canvas.height - 64));
            monster.isDrawed=false;
            console.log(count,hero)
            if(count>40*100){
                monster.ready = false
            }
        }

    };

    // 画出所有物体
    var render = function () {

        if (hero.ready) {
        	  ctx.clearRect(hero.oldx, hero.oldy, hero.w,hero.h);
            ctx.drawImage(heroImage, hero.x, hero.y, hero.w,hero.h);
            hero.oldx = hero.x; hero.oldy = hero.y;
        }
        if (monster.ready && !monster.isDrawed) {
            ctx.drawImage(monsterImage, monster.x, monster.y,monster.w,monster.h);
            monster.isDrawed = true;
        }

    };

    // 游戏主函数
    var main = function () {
        var now = Date.now();
        var delta = now - then;
        update(delta / 1000);
        render();
        then = now;
        // 立即调用主函数
        requestAnimationFrame(main);
    };

    // 少年，开始游戏吧！
    var then = Date.now();
    main();
</script>
</body>
</html>
给小朋友做的一个很简单的游戏

猜你喜欢
