HTML+CSS+JS实现的贪吃球小游戏【转】

转载地址：【https://blog.csdn.net/qq_43115104/article/details/84228987】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃球大作战</title>
<style>
#d01{
    width: 606px;
    margin: 20px auto;
}
#c01{
    border-top: 3px solid #80ffff;
    border-right: 3px solid #00ff00;
    border-bottom: 3px solid #ff0000;
    border-left: 3px solid #ff8080;
    background-color: black;
}
#d02{
    width: 606px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
    font-size:12px;
    font-style: italic;
}
#i01{
    display: block;
    margin-left: 200px;
    float: left;
}
#i02{
    display: block;
    margin-right: 200px;
    float: right;
}
</style>
</head>
<body onkeydown="doKeyDown(event)">
    <div id="d01">
        <canvas id="c01" width="600" height="500"></canvas><!--画布-->
        <div id="d02"></div><!--提示框-->
        <input type="button" value="重新开始" onClick="rest()" id="i01"> 
        <input type="button" value="游戏说明" onClick="explain()" id="i02">
    </div>
    <script type="text/javascript">
        var canvas = document.getElementById("c01");
        var context = canvas.getContext("2d");
        var tooltip = document.getElementById("d02");
        var Serpengo = {//红色贪吃球
            "x" : 100,
            "y" : 100,
            "r" : 8,
            "color" : "red"
        }
        var Circle = {//蓝色小球
            "x" : 50,
            "y" : 50,
            "r" : 4,
            "color" : "blue"
        }
        var Rect = {//绿色方块
            "x" : 200,
            "y" : 200,
            "width" : 8,
            "height" : 8,
            "color" : "green"
        }
        function rest() {//重置
            Serpengo.r = 8;
            draw();
            drawFood();
        }
        function draw() {
            var width = 600;
            var height = 500;
            //清空画布
            context.clearRect(0, 0, width, height);
            //绘制贪吃球
            context.fillStyle = Serpengo.color;
            context.beginPath();
            context.arc(Serpengo.x, Serpengo.y, Serpengo.r, 0, Math.PI * 2, true);
            context.fill();
        }
        window.addEventListener("load", draw, true);
        function doKeyDown(event) {
            var flag=false;//接触旗帜
            switch (event.keyCode) {
            case 38://上键头
                if(Serpengo.y<=0) {//边界判断
                    break;
                }
                Serpengo.y -= 4;
                draw();
                break;
            case 40://下键头
                if(Serpengo.y>=500) {//边界判断
                    break;
                }
                Serpengo.y += 4;
                draw();
                break;
            case 37://左键头
                if(Serpengo.x<=0) {//边界判断
                    break;
                }
                Serpengo.x -= 4;
                draw();
                break;
            case 39://右箭头
                if(Serpengo.x>=600) {//边界判断
                    break;
                }
                Serpengo.x += 4;
                draw();
                break;
            }
            if ((Serpengo.x - Circle.x) * (Serpengo.x - Circle.x)
                    + (Serpengo.y - Circle.y) * (Serpengo.y - Circle.y) <= (Serpengo.r + Circle.r)
                    * (Serpengo.r + Circle.r)) {//判断红色贪吃球与蓝色小球是否接触
                circleRandom();
                Serpengo.r += 2;
                flag=true;
            }
            if ((Serpengo.x - Rect.x) * (Serpengo.x - Rect.x)
                    + (Serpengo.y - Rect.y) * (Serpengo.y - Rect.y) <= (Serpengo.r + 6)
                    * (Serpengo.r + 6)) {//判断红色贪吃球与绿色方块是否接触
                rectRandom();
                Serpengo.r += 2;
                flag=true;
            }
            if (Serpengo.r > 200) {//贪吃球上限设置
                Serpengo.r = 200;
            }
            if(flag){//接触到了就重画
                draw();
            }
            drawFood();
        }
        function drawFood() {
            drawCircle();
            drawRect();
        }
        function drawCircle() {
            context.fillStyle = Circle.color;
            context.beginPath();
            context.arc(Circle.x, Circle.y, Circle.r, 0, Math.PI * 2, true);
            context.fill();
        }
        window.addEventListener("load", drawCircle, true);
        function circleRandom() {
            Circle.x = Math.random();
            Circle.x = Math.ceil(Circle.x * 600);
            Circle.y = Math.random();
            Circle.y = Math.ceil(Circle.y * 500);
        }
        function drawRect() {
            context.fillStyle = Rect.color;
            context.beginPath();
            context.rect(Rect.x, Rect.y, Rect.width, Rect.height);
            context.fill();
        }
        window.addEventListener("load", drawRect, true);
        function rectRandom() {
            Rect.x = Math.random();
            Rect.x = Math.ceil(Rect.x * 600);
            Rect.y = Math.random();
            Rect.y = Math.ceil(Rect.y * 500);
        }
        var showhelp = false;
        function explain() {
            showhelp = !showhelp;
            if (showhelp) {
                tooltip.innerHTML = "用键盘的上、下、左、右键移动红色贪吃球，吃掉蓝色小球或者绿色方块，可以让红色贪吃球变大，直到红色贪吃球半径大至所设置的上限。";
            } else {
                tooltip.innerHTML = "贪吃球大作战";
            }
        }
    </script>
</body>
</html>
HTML+CSS+JS实现的贪吃球小游戏【转】

猜你喜欢
