Question

我只用HTML创建一个简单的游戏，或多或少有效...我的问题是我是否可以制作一个简单的菜单/ 用＆＃34;点击开始＆＃34;或类似的东西 /背景图像和1个按钮开始游戏。如果我可以在同一档案中。谢谢。

    <canvas id="ctx" width="1024" height="800" style="border:3px solid #000000;"></canvas>
<script>

var Height = 800;
var Width = 1024;
var timeElapset = Date.now();

var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Consolas';

var frameCount = 0;
var score = 0;

var player = {
    x:50,
    spdX:30,
    y:40,
    spdY:30,
    name:'P',
    hp:10,
    width:20,
    height:20,
    color:'green',
};

var enemyList = {};

getDistance = function (Obj1,Obj2){ 

    var vx = Obj1.x - Obj2.x;
    var vy = Obj1.y - Obj2.y;
    return Math.sqrt((vx*vx)+(vy*vy));
}


checkCollision = function (Obj1,Obj2){

    var rect1 = {
        x: Obj1.x - Obj1.width/2,
        y: Obj1.y - Obj1.height/2,
        height: Obj1.height,
        width: Obj1.width,
    }

    var rect2 = { 
        x: Obj2.x - Obj2.width/2,
        y: Obj2.y - Obj2.height/2,
        height: Obj2.height,
        width: Obj2.width,
    }
    return testCollisionRectRect(rect1,rect2); //true o false

}

Enemy = function (id,x,y,spdX,spdY,width,height){

    var enemy = {
        x:x,
        spdX:spdX,
        y:y,
        spdY:spdY,
        name:'E',
        id:id,
        width:width,
        height:height,
        color:'black',
    };
    enemyList[id] = enemy;    
}

document.onmousemove = function(mouse){

    var mouseX = mouse.clientX - document.getElementById('ctx').getBoundingClientRect().left;
    var mouseY = mouse.clientY - document.getElementById('ctx').getBoundingClientRect().top;

    if(mouseX < player.width/2)
        mouseX = player.width/2;

    if(mouseX > Width-player.width/2)
        mouseX = Width - player.width/2;

    if(mouseY < player.height/2)
        mouseY = player.height/2;

    if(mouseY > Height - player.height/2)
        mouseY = Height - player.height/2;

    player.x = mouseX;
    player.y = mouseY;
}


updateEntity = function (Z){

    updatePosition(Z);
    drawPlayer(Z);
}


updatePosition = function(Z){

    Z.x += Z.spdX;
    Z.y += Z.spdY;

    if(Z.x < 0 || Z.x > Width){
        Z.spdX = -Z.spdX;
    }
    if(Z.y < 0 || Z.y > Height){
        Z.spdY = -Z.spdY;
    }
}


testCollisionRectRect = function(rect1,rect2){

    return rect1.x <= rect2.x+rect2.width && 
           rect2.x <= rect1.x+rect1.width && 
           rect1.y <= rect2.y + rect2.height &&
           rect2.y <= rect1.y + rect1.height;
}


drawPlayer = function(Z){


    ctx.save();
    ctx.fillStyle = Z.color;
    ctx.fillRect(Z.x-Z.width/2,Z.y-Z.height/2,Z.width,Z.height);

    ctx.restore();
}

update = function(){

    ctx.clearRect(0,0,Width,Height);
    frameCount++;
    score++;

    if(frameCount % 100 == 0)
        randomGenerateEnemy();


    for(var key in enemyList){
        updateEntity(enemyList[key]);

        var isColliding = checkCollision(player, enemyList[key]);

        if(isColliding){
            player.hp = player.hp -1;
        }
    }

    if(player.hp <= 0){
        var timeSurvived = Date.now() - timeElapset;           
        console.log("Has ganado Kappa, Tiempo vivo " + timeSurvived + " ms."); 
        ctx.fillText(" You Lose! ", Width/2, Height/2);
        GameEngine();
    }


    drawPlayer(player);
    ctx.fillText(player.hp + " Hp",20,30);
    ctx.fillText('Puntuacion: ' + score/10,700,30);
}


GameEngine = function(){

    player.hp = 13;
    timeElapset = Date.now();
    frameCount = 0;
    score = 0;

    enemyList = {};

    randomGenerateEnemy();
    randomGenerateEnemy();
    randomGenerateEnemy();
    randomGenerateEnemy();

}


randomGenerateEnemy = function(){

    var x = Math.random()*Width;
    var y = Math.random()*Height;

    var height = 10 + Math.random()*70;    
    var width = 10 + Math.random()*70;
    var id = Math.random();

    var spdX = 5 + Math.random() * 5;
    var spdY = 5 + Math.random() * 5;

    Enemy(id,x,y,spdX,spdY,width,height);  
}

GameEngine();

setInterval(update,30);

</script>

这就是我所拥有的。

Answer 1

代码还包含javascript。为了正确的游戏功能，必须在你的html页面上调用.js文件。也可以使用css使其具有吸引力。考虑这个例子

enter code here
<html>
<head>
<title>Your game title</title>
<script type="text/javascript" src="src/Common.js"></script>
<script type="text/javascript" src="src/Perlin.js"></script>
<script type="text/javascript" src="src/ChaikinCurve.js"></script>
<script type="text/javascript">
    var app = null;
    window.onload = function() {
        utils.loadShaderXml("src/render/shaders.xml", null,          function(shaders) {
            if (shaders instanceof Exception) {
                app = shaders;
            } else {
                try {
                    app = new App('canvas', shaders, null);
                } catch (e) {
                    app = e;
                }
            }
        });
        document.onselectstart = function () {
            return false;
        };
    };
    function application() {
        if (app == null) {
            alert("Application is absent");
            throw "no application";
        } else if (app instanceof Exception) {
            alert("An exception occured while creating the application:\n" + app.message);
            throw app;
        } else {
            return app;
        }
    }
</script>

<style type="text/css">
    body{
        margin: 0px; padding: 0px; overflow: hidden;
        background: #000;
    }
    #canvas-holder.active {
        position: absolute;
        padding: 0px;
        left: 50%;
        top: 50%;
    }
    #canvas-holder.inactive {
        position: absolute;
        top:50%;
        width: 100%;
        text-align: center;
    }
    #canvas {
        padding: 0px;
        width: 100%;
        height: 100%;
        color: #fff;
        font-family: Allan, Arial;
        font-size: 40px;
    }
</style>
</head>
<body>
<div id="canvas-holder" class="inactive">
<div id="canvas">Your game` is loading...</div>
</div>
<div style="font-family: Lobster; visibility: hidden">one</div>
<div style="font-family: Allan; visibility: hidden">two</div>
<div style="font-family: Meddon; visibility: hidden">three</div>
<div style="font-family: Cuprum; visibility: hidden">four</div>
</body>
</html>

如何为使用HTML制作的游戏实现简单的菜单？

1 个答案: