精华内容
下载资源
问答
  • HTML小游戏

    千次阅读 2021-02-15 14:42:40
    游戏截图如下: <!DOCTYPE html> <html> <head></head> <body> <!-- 4个board --> <div id="board1" style="position: absolute; width:80px; height:10px; left:420px...

    游戏截图如下:

    游戏截图

    <!DOCTYPE html>
    <html>
        <head></head>
        <body>
            <!-- 4个board -->
            <div id="board1" style="position: absolute; width:80px; height:10px; left:420px; 
            top:555px; background-color: cadetblue;"></div>
            <div id="board2" style="position: absolute; width:80px; height:10px; left:520px; 
            top:555px; background-color: cadetblue;"></div>
            <div id="board3" style="position: absolute; width:80px; height:10px; left:620px; 
            top:555px; background-color: cadetblue;"></div>
            <div id="board4" style="position: absolute; width:80px; height:10px; left:720px; 
            top:555px; background-color: cadetblue;"></div>
            <!-- 小球 -->
            <div id="ball" class="circle" style="width:20px; 
            height:20px; background-color:crimson; border-radius: 50%; position:absolute; 
            left:600px; top:100px"></div>
            <!-- 框 -->
            <div id="box" style="border: 5px solid #555555; width:400px; height:550px"></div>
            <!-- 分数 过的board越多,分数越高 -->
            <div id="score" style="width:200px; height:10px; position:absolute; left:900px; 
                font-family:'隶书'; font-size: 30px;">分数:0</div>
            <!-- 游戏结束 -->
            <div id="gg" style="width:200px; height:10px; position:absolute; left:550px; top:200px;
            font-family:'隶书'; font-size: 30px; display: none;">游戏结束</div>
            <script>
                // 设置box的样式
                var box = document.getElementById("box");
                box.style.position = "absolute";
                box.style.left = "400px";
                // 设置board的样式
                var board1 = document.getElementById("board1");
                var board2 = document.getElementById("board2");
                var board3 = document.getElementById("board3");
                var board4 = document.getElementById("board4");
                // 声音
                var shengyin = new Audio();
                shengyin.src = "声音2.mp3";
                shengyinFlag = 0; // 用来表示小球在第几块board上
                // 键盘事件函数
                var ball = document.getElementById("ball");
                document.onkeydown = f;
                function f(e){
                    var e = e || window.event;
                    switch(e.keyCode){
                        case 37:
                            // 按下左键,小球左移,但不要超过左边框
                            if(ball.offsetLeft>=box.offsetLeft + 10)
                                ball.style.left = ball.offsetLeft - 8 + "px";
                            break;
                        case 39:
                            // 按下右键,小球右移,但不要超过由边框
                            if(ball.offsetLeft<=box.offsetLeft+box.offsetWidth-ball.offsetWidth-10)
                                ball.style.left = ball.offsetLeft + 8 + "px";
                            break;
                        case 32:
                            
                    }
                }
                // 定义一个分数变量
                var fenshu = 0;
                // 定义一个函数,移动给定的一个board
                function moveBoard(board)
                {
                    var t1 = board.offsetTop;
                    if(t1<=0)
                    {
                        // 如果board移到最上面了,就随机换个水平位置,再移到最下面
                        t2 = Math.floor(Math.random() * (720- 420) + 420);
                        board.style.left = t2 + "px";
                        board.style.top = "555px";
                        fenshu += 1; //分数增加1
                        document.getElementById("score").innerHTML = "分数:" + fenshu;
                    }
                        // 
                    else
                        board.style.top = board.offsetTop - 1 + "px";
                }
                // 定义小球的速度变量
                var startSpeed = 1;
                var ballSpeed =startSpeed;
                // step函数是游戏界面的单位变化函数
                function step()
                {
                    // board直接上下隔得太近,就逐个移动,否则,同时移动
                    var t1 = Math.abs(board1.offsetTop - board2.offsetTop);
                    var t2 = Math.abs(board2.offsetTop - board3.offsetTop);
                    var t3 = Math.abs(board3.offsetTop - board4.offsetTop);
                    // 定义一个board之间的间隔距离
                    var t4 = 140;
                    if(t1<t4)
                    {
                        moveBoard(board1);
                    }
                    else if(t2<t4)
                    {
                        moveBoard(board1);
                        moveBoard(board2);
                    }
                    else if(t3<t4)
                    {
                        moveBoard(board1);
                        moveBoard(board2);
                        moveBoard(board3);
                    }
                    else
                    {
                        moveBoard(board1);
                        moveBoard(board2);
                        moveBoard(board3);
                        moveBoard(board4);
                    }
                    // 定义小球的垂直移动规则,1、向下匀加速运动,2、如果碰到board就被board持续抬上去,
                    // 直到按左右键离开了该board
    
                    // 如果小球的纵坐标等于某个board的纵坐标,就被抬起
                    var t5 = Math.abs(ball.offsetTop - board1.offsetTop);
                    var t6 = Math.abs(ball.offsetTop - board2.offsetTop);
                    var t7 = Math.abs(ball.offsetTop - board3.offsetTop);
                    var t8 = Math.abs(ball.offsetTop - board4.offsetTop);
                    if(t5<=ball.offsetHeight && t5>0 && ball.offsetLeft>=board1.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board1.offsetLeft+board1.offsetWidth)
                    {
                        ball.style.top = board1.offsetTop - ball.offsetHeight + "px";
                        ballSpeed = startSpeed;
                        if(shengyinFlag != 1)
                        {
                            shengyin.play();
                            shengyinFlag = 1;
                        }
                    }
                    else if(t6<=ball.offsetHeight && t6>0 && ball.offsetLeft>=board2.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board2.offsetLeft+board2.offsetWidth)
                    {
                        ball.style.top = board2.offsetTop - ball.offsetHeight + "px";
                        ballSpeed = startSpeed;
                        if(shengyinFlag != 2)
                        {
                            shengyin.play();
                            shengyinFlag = 2;
                        }
                    }
                    else if(t7<=ball.offsetHeight && t7>0 && ball.offsetLeft>=board3.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board3.offsetLeft+board3.offsetWidth)
                    {
                        ball.style.top = board3.offsetTop - ball.offsetHeight + "px";
                        ballSpeed = startSpeed;
                        if(shengyinFlag != 3)
                        {
                            shengyin.play();
                            shengyinFlag = 3;
                        }
                    }
                    else if(t8<=ball.offsetHeight && t8>0 && ball.offsetLeft>=board4.offsetLeft-ball.offsetWidth && ball.offsetLeft<=board4.offsetLeft+board4.offsetWidth)
                    {
                        ball.style.top = board4.offsetTop - ball.offsetHeight + "px";
                        ballSpeed = startSpeed;
                        if(shengyinFlag != 4)
                        {   
                            shengyin.play();
                            shengyinFlag = 4;
                        }
                    }
                    else
                    {
                        ballSpeed = ballSpeed + 0.01; // 数字相当于加速度
                        ball.style.top = ball.offsetTop + ballSpeed + "px";
                    }
                    // ballSpeed = ballSpeed + 0.01; // 数字相当于加速度
                    // ball.style.top = ball.offsetTop + ballSpeed + "px";
                    
                    // 如果小球跑出来box,就结束游戏
                    if(ball.offsetTop==0 || ball.offsetTop>=box.offsetTop+box.offsetHeight)
                    {
                        clearInterval(gameover);
                        ball.style.display = 'none';
                        board1.style.display = 'none';
                        board2.style.display = 'none';
                        board3.style.display = 'none';
                        board4.style.display = 'none';
                        var gg = document.getElementById("gg"); //显示游戏结束
                        gg.style.display = 'block';
                    }
                }
    
                var gameover = setInterval("step();", 8);
            </script>
        </body>
    </html>
    
    展开全文
  • html小游戏--纯页面html小游戏贪吃蛇(基础版)

    千次阅读 多人点赞 2021-02-24 11:24:31
    直接复制到一个页面就行了 代码如下: <!DOCTYPE html> <html> <head> <...meta name="Description" content="这是一个初学者用来学习的小游戏"> <style type="text/cs

    直接复制到一个页面就行了
    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    	<title>贪吃蛇</title>
    	<meta charset="UTF-8">
    	<meta name="keywords" content="贪吃蛇">
    	<meta name="Description" content="这是一个初学者用来学习的小游戏">
    	<style type="text/css">
    	*{margin:0;}
    	.map{margin:100px auto;
    		height:600px;
    		width:900px;
    		background:#00D0FF;
    		border:10px solid #AFAEB2;
    		border-radius:8px;
    	}
    	</style>
     
     
     
    </head>
     
    <body>
    <div class="map">
    <canvas id="canvas" height="600" width="900">
    	
    </canvas>
    </div>
     
    <script type="text/javascript">
     //获取绘制工具
    	/*
    	var canvas = document.getElementById("canvas");
    	var ctx = canvas.getContext("2d");//获取上下文
    	ctx.moveTo(0,0);
    	ctx.lineTo(450,450);*/
    	var c=document.getElementById("canvas");
        var ctx=c.getContext("2d");
        /*ctx.beginPath();
        ctx.moveTo(0,0);
        ctx.lineTo(450,450);
        ctx.stroke();
        */
     
        var snake =[];//定义一条蛇,画蛇的身体
        var snakeCount = 6;//初始化蛇的长度
    	var foodx =0;
    	var foody =0;
        var togo =0;
        function drawtable()//画地图的函数
        {
     
     
        	for(var i=0;i<60;i++)//画竖线
        	{
        		ctx.strokeStyle="black";
        		ctx.beginPath();
        		ctx.moveTo(15*i,0);
        		ctx.lineTo(15*i,600);
        		ctx.closePath();
        		ctx.stroke();
        	}
            for(var j=0;j<40;j++)//画横线
        	{
        		ctx.strokeStyle="black";
        		ctx.beginPath();
        		ctx.moveTo(0,15*j);
        		ctx.lineTo(900,15*j);
        		ctx.closePath();
        		ctx.stroke();
        	}
        	
        	for(var k=0;k<snakeCount;k++)//画蛇的身体
    			{
    			ctx.fillStyle="#000";
    			if (k==snakeCount-1)
    			{
    				ctx.fillStyle="red";//蛇头的颜色与身体区分开
    			}
    			ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标,后两个数是矩形的长宽。
    			
    			}
    			//绘制食物	
        		ctx.fillStyle ="black";
    	     ctx.fillRect(foodx,foody,15,15);
    	     ctx.fill();
        	
        }
     
        
        function start()//定义蛇的坐标
        {
        	//var snake =[];//定义一条蛇,画蛇的身体
            //var snakeCount = 6;//初始化蛇的长度
    		
    		for(var k=0;k<snakeCount;k++)
        		{
        			snake[k]={x:k*15,y:0};
        			
                }
    			
    		  drawtable();
              addfood();//在start中调用添加食物函数
     
        }
     
        function addfood()
    	{
    	foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数
    	foody = Math.floor(Math.random()*40)*15;
    		
    		for (var k=0;k<snake;k++)
    		{
    			if (foodx==snake[k].x&&foody==sanke[k].y)//防止产生的随机食物落在蛇身上
    			{	
    			addfood();
    			}
    		}
    	
    	
    	}	
        		
       function move()
       {
    	switch (togo)
    	{
    	case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走
    	case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;
    	case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;
    	case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;
    	case 5: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break;
    	case 6: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break;
    	default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});
    	}
        snake.shift();//删除数组第一个元素
       	ctx.clearRect(0,0,900,600);//清除画布重新绘制
       	isEat();
    	isDead();
    	drawtable();
       } 			
       
       function keydown(e)
       {
       switch(e.keyCode)
    		{
             case 37: togo=1; break;
    		 case 38: togo=2; break;
    		 case 39: togo=3; break;
    		 case 40: togo=4; break;
    		 case 65: togo=5; break;
    		 case 68: togo=6; break;
    		}
       }
       
       function isEat()//吃到食物后长度加1
       {
        if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody)
       {
    		addfood();
    		snakeCount++;
    		snake.unshift({x:-15,y:-15});
       }
       
       }
       
       function isDead()
       {
        if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0)
    		{
    		alert("You are dead,GAME OVER!!!");
    		window.location.reload();
    		}
       }
       
        document.onkeydown=function(e)
    {
    	keydown(e);
     
    } 
    window.onload = function()//调用函数
    { 
    	start();
    	setInterval(move,150);
    	drawtable();
    	
    	
     
    }
    </script>
    </body>
    </html>
    
    展开全文
  • HTML5小游戏源代码大全(300M)|____27 a-space-game.zip|____26 webDiplomacy-100.tar.zip|____25 TJMJ_014_20110801.zip|____24 tank 3.0.zip|____23 starloot.zip|____22 simple-puzzle-game.zip|____21 mozilla-...

    HTML5小游戏源代码大全(300M)

    |____27 a-space-game.zip

    |____26 webDiplomacy-100.tar.zip

    |____25 TJMJ_014_20110801.zip

    |____24 tank 3.0.zip

    |____23 starloot.zip

    |____22 simple-puzzle-game.zip

    |____21 mozilla-BrowserQuest-af32d24.zip

    |____20 Gamvas-0.8.2.zip

    |____19 fusionjs.zip

    |____18 dad-engine_v0.2a.zip

    |____17 HMTL5 让蘑菇动起来游戏.zip

    |____16 HTML5 超萌休闲小游戏—打地鼠.zip

    |____15 HTML5 超级玛丽小游戏源代码.zip

    |____14 HTML5 超级玛丽.zip

    |____13 HTML5 纯代码扫雷游戏实例.zip

    |____12 HTML5 漂亮的质感小鱼.zip

    |____11 HTML5 游戏引擎插件box2d实现小球碰撞叠加.zip

    |____10 HTML5 水果忍者网页版(source).zip

    |____09 HTML5 植物大战僵尸.zip

    |____08 HTML5 捕鱼达人源代码ForAndroid.zip

    |____07 HTML5 山寨版愤怒的小鸟源码.zip

    |____06 HTML5 太空战舰.zip

    |____05 HTML5 塔防源码.zip

    |____04 HTML5 圈泡泡游戏源码.zip

    |____03 HTML5 俄罗斯方块.zip

    |____02 HTML5 三国杀版连连看(使用html5的canvas特性,纯javascript开发).zip

    |____01 HTML5 驴子跳游戏(原作者绝对实战开发指南 + 游戏源码)珍藏版.zip

    展开全文
  • 如图所示,就是找不同,简单的一个休闲小游戏链接: https://pan.baidu.com/s/1ompL2trC1e6tfx4tpaePaw 提取码: ph9v 复制这段内容后打开百度网盘手机App,操作更方便哦附上一个小技巧(逃[JavaScript] 纯文本查看 ...

    如图所示,就是找不同,简单的一个休闲小游戏

    0c2e811dbd307b7a347f537cf42b6b57.png

    e3ead00d51888c863aeee3b32eb8198c.png

    ed549e12d04406ba1166c316c3b03082.png

    0df34efc363850430e987300d826a3be.png

    链接: https://pan.baidu.com/s/1ompL2trC1e6tfx4tpaePaw 提取码: ph9v 复制这段内容后打开百度网盘手机App,操作更方便哦

    附上一个小技巧(逃

    [JavaScript] 纯文本查看 复制代码

    function find() {

    var box = document.getElementById("box");

    var blocks = box.childNodes;

    var i, c, n, t;

    for (i = 0; i < blocks.length - 1; i++) {

    c = blocks[i].style["backgroundColor"];

    n = blocks[i + 1].style["backgroundColor"];

    if (c != n)

    break;

    };

    if (i == 0)

    t = blocks[i + 2].style["backgroundColor"];

    else

    t = blocks[i - 1].style["backgroundColor"];

    if (c == t)

    return i + 1;

    else

    return i;

    };

    setInterval(function () {

    var crazyModel = true;

    if (crazyModel) {

    //疯狂屠戮模式

    document.getElementById("box").childNodes[find()].click();

    } else {

    //辅助瞄准模式

    document.getElementById("box").childNodes[find()].style.border = "5px solid black";

    }

    }, 100);//这个值越小,屠戮模式越疯狂……

    490017dfd638209f3a1758600ba79756.png

    展开全文
  • html俄罗斯方块(基础版) 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>俄罗斯方块</title> </head> <body> <div id ...
  • SlotMachinebody{background:gray;}#test{background:#fff;width:100%;max-width:551px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}您的浏览器不支持Canvas,现在都什么年代了;...
  • 资源内容:HTML5小游戏源代码大全(300M)|____27 a-space-game.zip|____26 webDiplomacy-100.tar.zip|____25 TJMJ_014_20110801.zip|____24 tank 3.0.zip|____23 starloot.zip|____22 simple-puzzle-game.zip|____21 ...
  • HTML5实战:图片与标签配合制作页面1、基本标签介绍2、页面跳转的实现HTML实战-极客学院播放视频页面布局1、HTML实战-视频播放页面头部布局实现2、HTML实战-极客学院视频模块布局实现3、HTML实战-极客学院视频课程...
  • 【实例简介】一个基于html5设计的小游戏【实例截图】【核心代码】H5小游戏100例: 一笔画重新开始回退let onestroke = new OneStroke({// 默认的线段颜色与端点颜色lineColor: 0xe2e2e2,vertexColor: 0x6dc6c0,...
  • 介绍: 包含70个小游戏,在线娱乐,界面简洁干净,站长的人气好帮手,上传服务器即可。 网盆下载地址: https://zijiewangpan.com/82syq1x96X6 图片:
  • 特效描述:html5手机触屏 接红包小游戏。canvas 红包下落点击接住红包,结束计算金额及红包个数。请用手机扫码打开正常演示。代码结构1. 引入CSS2. 引入JS3. HTML代码function set_meta() {var body_width = ...
  • 移动端拖动小游戏

    2021-06-08 15:37:19
    这次来个拖动的小游戏吧,格子随机,这里以编号标识,其实就是里面的class,编号对应,底部小格子就可以拖曳到上面对应位置,+1分。拖动小游戏.pnghtmlapp.js$(function () {/*************************************...
  • 今天给大家分享一个HTML5五子棋小游戏的源代码,素材来源网络,首先看一下效果图: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport...
  • 过去,flash多媒体应用可以用来构建线上游戏,也是小游戏的主流形态,但是随着HTML5的到来,改变了线上游戏的构建方法,用HTML5制作游戏相比flash更加灵活方便。你还记得水果忍者吗?尤其在iphone流畅的ios系统下...
  • 于是我选择把这个小项目改了一下,变成了类似打飞镖的小游戏。 因为刚开始学习JS,所以代码肯定是瑕疵很多,主要是希望想要做点小项目的新手可以有一些参考。(比较我去网上找飞机大战的项目都是天花乱坠复杂的一批...
  • 微信小游戏集合,大概四百多个小游戏,微信朋友圈营销必备,H5自适应页面,手机页面,PC页面全部自动适应,内含详细的安说明,需要的朋友下载吧! 游戏压缩包下载完毕解压后,对整个目录查找以下内容,即可完成替换...
  • 如何在网页插入小游戏,有两种方法:方法一:使用IE浏览器1、首先打开一个小游戏,等待他加载完毕,也就是等游戏可以玩的时候;2、在浏览器的菜单栏上面,点击【工具】,然后选择【internet选项】;3、在常规选项下...
  • 贪吃蛇小游戏(HTML+CSS+JS)

    千次阅读 2021-11-10 19:50:01
    小蛇的长度增加:先获取到小蛇尾巴的坐标,然后再最后面加一个小方块 游戏(地图,食物,小蛇都包含在这里面) 1、小蛇的移动是用定时器删除就坐标上的小蛇,创建了一个新的小蛇 2、移动方向的改变是获取键盘按键的...
  • 猜数字游戏.html

    2021-06-09 02:01:12
    html>猜数字游戏猜数字游戏点击按钮,显示开始框。开始次数:开始第一个数:第二个数:第三个数:第四个数:function myFunction(){var x;var r=confirm("按下按钮!");if (r==true)}var x;var r=confirm("按下...
  • h5小游戏源码怎么查看Adobe Edge当前处于预览状态的Adobe Edge是一种使用HTML5,CSS和JavaScript开发动态交互式内容的设计工具。 内容与移动设备和台式计算机兼容。 Edge的重要功能是Web工具箱界面,该界面便于确保...
  • 了解的人都应该知道HTML5有大量的动画和交互功能,完全可以用来完成一些游戏类的操作,今天收集分享:41个用HTML5制作完成的游戏作品,希望其中有你喜欢和需要的,或者可以给你带来灵感的。1-Pirateslovedaisies2-...
  • 小游戏var num=1;function fun(){if (num==1){fun2();num=2;}else if(num==2){fun3();num=3;}else if(num==3){fun4();num=4;}else if(num==4){fun1();num=1;}}function fun1(){document.getElementById('d1').style....
  • 今天的文章就是给大家带来一些基于HTML/CSS/JS的情人节表白可爱小游戏、小动画。 1.小鹿亲嘴 这两个年轻的小鹿相爱。你可以帮助他们在一起吗? 使用Matter.js物理特性和自定义psuedo-rigging进行构建。已更新为固定...
  • t1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../css/t1.css"> </head> <...
  • 很多玩微信公共平台的朋友都想在公共平台上面插入几个小游戏,用来跟用户之间互动,这里花生来分享一下如何在微信公共平台上插入游戏,以及如何制作html5微信小游戏。首先是找游戏,总共有三个方法,本人比较倾向于...
  • 以下为游戏代码:var timerID = null;var INT = 40;var loadFLG = 0;var gameFLG = 0;var missFLG = 0;var tim = 0;var blcol = new Array(5); // block colorvar blsta = new Array(40); // block statusvar blNO =...
  • 我们就要准备做游戏的界面,先是找到我们需要的素材,再画棋盘,需要用到canvas标签,然后画棋盘主要在js里做 棋盘画好后,就是画棋子 棋子画好后,我们需要让棋子能够交替执行 最后定义输赢的规则,也就是棋子的五颗...
  • 翻开的2张牌如果配对就会消除,否则2张牌都会返回背面。需求分析怎么绘制正的牌面和背的牌面及配对成功后怎么消除牌面怎么生成牌组并且确定每张牌的位置和对应的图片怎么洗牌怎么记录牌组的配对信息怎么确定点击事件...
  • javascript实实现现打打砖砖块块小小游游戏戏 ((附附完完整整源源码码))小时候玩一天的打砖块小游戏,附完整源码在?给个赞?实实现现如如图图需需求求 析析1、小球在触碰到大盒子上、左、右边框,以及滑块后沿另一...
  • 这篇文章主要介绍了关于用html5的63行代码实现贪吃蛇游戏,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下贪吃蛇,最主要的功能点:1、蛇的移动2、改变蛇的方向3、放置食物4、增加舍身5、怎么挂的,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 233,255
精华内容 93,302
关键字:

html小游戏

友情链接: fenye.rar