精华内容
下载资源
问答
  • html5小游戏代码-2048游戏
    万次阅读 多人点赞
    2019-06-29 13:53:39
    <!doctype html>
    <meta name="author" content="苏道涵"/>
    <meta name="keywords" content="2048"/>
    <meta http-equiv="content-Type" content="text/html;charset=gb2312"/>
    
    
    <html>
    <head>
    <title>2048小游戏</title>
    <style>
    .up,.down,.left,.right{
    font-size:30px;
    
    
    }
    canvas{
    border-style:solid;
    float:left;
    }
    .right{float:left;
    margin-top:80px;
    margin-left:400px;
    height:100px;
    width:50px;
    }
    .down,.up{
    
    margin-left:550px;
    }
    .left{
    margin-top:80px;
    margin-bottom:100px;
    
    }
    
    </style>
    </head>
    
    
    <body>
    <h1 align=center>2048小游戏</h1>
    <div class="down" onclick="down()">下</div>
    <div class="right" onclick="right()">右</div>
    <canvas id="drawing" height=200px width=200px ></canvas>
    <div class="left" onclick="left()">左</div>
    <div class="up" onclick="up()">上</div>
    <script>
    var tArray=new Array();
    for(var i=0;i<4;i++){
    tArray[i]=new Array();
    for(var t=0;t<4;t++){
    tArray[i][t]="";
    }
    }
    var locx;var locy;
    function produce(){
    locx=Math.ceil(Math.random()*4-1);
    locy=Math.ceil(Math.random()*4-1);
    if(locx==-1||locy==-1||tArray[locx][locy]!=""){
    produce();
    }
    }
    produce();
    tArray[locx][locy]=2;
    produce();
    tArray[locx][locy]=4;
    var drawing=document.getElementById("drawing");
    if(drawing.getContext){
    var context=drawing.getContext("2d");
    context.beginPath();
    context.lineWidth=0.25;
    for(var t2=0;t2<3;t2++){
    context.moveTo(50+t2*50,0);
    context.lineTo(50+t2*50,200);
    }
    for(var i2=0;i2<3;i2++){
    context.moveTo(0,50+i2*50);
    context.lineTo(200,50+i2*50);
    }
    
    context.stroke();
    
    
    
    }
    
    function display(){
    for(var t1=0;t1<4;t1++){
    for(var i1=0;i1<4;i1++){
    context.clearRect(50*t1,50*i1,50,50);
    context.strokeRect(50*t1,50*i1,50,50);
    context.fillText(tArray[t1][i1],20+50*t1,30+50*i1);
    }
    }
    
    }
    display();
    var zeno=0;
    function down(){
    
    for(var t3=0;t3<4;t3++){
    for(var i3=0;i3<4;i3++){
    if(tArray[t3][i3]==""){
    zeno++;
    }
    else if((zeno!=0)&&(i3>zeno)&&(tArray[t3][i3-1-zeno]==tArray[t3][i3])){
    tArray[t3][i3-1-zeno]=tArray[t3][i3-1-zeno]+tArray[t3][i3];
    tArray[t3][i3]="";
    zeno++;
    }
    else{
    
    if(tArray[t3][i3+1]==tArray[t3][i3]){
    tArray[t3][i3]=tArray[t3][i3]+tArray[t3][i3+1];
    tArray[t3][i3+1]="";
    
    }
    
    
    if(zeno!=0){
    tArray[t3][i3-zeno]=tArray[t3][i3];
    tArray[t3][i3]="";
    }
    
    
    }
    
    
    
    
    
    }
    
    
    zeno=0;
    }
    output();
    display();
    zeno=0;
    }
    
    function up(){
    for(var t3=0;t3<4;t3++){
    for(var i3=3;i3>=0;i3--){
    if(tArray[t3][i3]==""){
    zeno++;
    }
    else if((zeno!=0)&&(tArray[t3][i3+1+zeno]==tArray[t3][i3])){
    tArray[t3][i3+1+zeno]=tArray[t3][i3+1+zeno]+tArray[t3][i3];
    tArray[t3][i3]="";
    zeno++;
    }
    else{
    
    if(i3>0&&tArray[t3][i3-1]==tArray[t3][i3]){
    tArray[t3][i3]=tArray[t3][i3]+tArray[t3][i3-1];
    tArray[t3][i3-1]="";
    
    }
    
    
    if(zeno!=0){
    tArray[t3][i3+zeno]=tArray[t3][i3];
    tArray[t3][i3]="";
    }
    
    
    }
    
    
    
    
    
    }
    
    
    zeno=0;
    }
    output();
    display();
    zeno=0;
    }
    
    function right(){
    for(var i3=0;i3<4;i3++){
    for(var t3=0;t3<4;t3++){
    if(tArray[t3][i3]==""){
    zeno++;
    }
    else if((zeno!=0)&&(t3>zeno)&&(tArray[t3-1-zeno][i3]==tArray[t3][i3])){
    tArray[t3-1-zeno][i3]=tArray[t3-1-zeno][i3]+tArray[t3][i3];
    tArray[t3][i3]="";
    zeno++;
    }
    else{
    
    if(t3<3&&tArray[t3+1][i3]==tArray[t3][i3]){
    tArray[t3][i3]=tArray[t3][i3]+tArray[t3+1][i3];
    tArray[t3+1][i3]="";
    
    }
    
    
    if(zeno!=0){
    tArray[t3-zeno][i3]=tArray[t3][i3];
    tArray[t3][i3]="";
    }
    
    
    }
    
    
    
    
    
    }
    
    
    zeno=0;
    }
    output();
    display();
    zeno=0;
    }
    
    function left(){
    for(var i3=0;i3<4;i3++){
    for(var t3=3;t3>=0;t3--){
    if(tArray[t3][i3]==""){
    zeno++;
    }
    else if((zeno!=0)&&(t3+1+zeno<4)&&(tArray[t3+1+zeno][i3]==tArray[t3][i3])){
    tArray[t3+1+zeno][i3]=tArray[t3+1+zeno][i3]+tArray[t3][i3];
    tArray[t3][i3]="";
    zeno++;
    }
    else{
    
    if(t3>0&&tArray[t3-1][i3]==tArray[t3][i3]){
    tArray[t3][i3]=tArray[t3][i3]+tArray[t3-1][i3];
    tArray[t3-1][i3]="";
    
    }
    
    
    if(zeno!=0){
    tArray[t3+zeno][i3]=tArray[t3][i3];
    tArray[t3][i3]="";
    }
    
    
    }
    
    
    
    
    
    }
    
    
    zeno=0;
    }
    output();
    display();
    zeno=0;
    
    }
    function output(){
    produce();
    if(Math.random()>0.5)
    tArray[locx][locy]=4;
    else
    tArray[locx][locy]=2;
    }
    
    </script>
    </body>
    
    </html> 
    
    更多相关内容
  • 页面代码、图片及音频资源都有。 大部分都是直接双击可以运行的,有部分小游戏需要修改下源码。
  • 该压缩包内一共包含91个html小游戏,旨在供想要开发小游戏的新手参考学习!觉得好的话记得帮转,让更多地人下载哦~
  • 80个HTML5小游戏源码

    2018-08-08 14:49:09
    八十个HTML5小游戏源码,仿照微信上的小游戏做的,很值得借鉴练习。 解压密码在压缩包右侧。
  • HTML5游戏代码集合

    2016-09-19 13:55:44
    HTML5有望成为网络游戏开发的热门新平台,其跨平台性已奠定了其未来发展的基础。本资源为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写,为大家讲解HTML5游戏开发基础教程及分享实战经验。
  • 目录效果代码说明 效果 以下均需要通过鼠标或者上下按键操控哦! 不是单纯实现的效果。 也是包含背景音乐的,背景也可以根据实际需要去更改或者添加! 代码 plane.html <!DOCTYPE html> <html lang="en"&...

    效果

    以下均需要通过鼠标或者上下按键操控哦!

    不是单纯实现的效果。

    也是包含背景音乐的,背景也可以根据实际需要去更改或者添加!
    在这里插入图片描述

    代码

    plane.html

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        body {
            background: #cccccc;
            height: 100%;
        }
    
        #wrap {
            position: relative;
            width: 540px;
            height: 960px;
            margin: 20px auto;
            border: 1px solid transparent;
            background: url('img/bg.jpg') center/cover;
        }
    
        #wrap h1 {
            color: azure;
            text-align: center;
            padding: 30px;
        }
    
        .option {
            width: 200px;
            height: 110px;
            line-height: 110px;
            font-size: 30px;
            color: steelblue;
            background: wheat;
            font-weight: bold;
            margin: 20px auto;
            text-align: center;
            cursor: pointer;
            background: url(./img/fire-row.png) no-repeat center -10px/ 90% auto ; 
        }
    
        .footer {
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: 20px;
            color: #fff;
        }
        /* enemy 敌机定位 */
    
        .enemy {
            position: absolute;
        }
        /* 血条 */
    
        .blood {
            position: absolute;
            left: 0;
            right: 0;
            top: -6px;
            margin: 0 auto;
            width: 70%;
            height: 2px;
            border-radius: 2px;
            /* border: 1px solid red; */
        }
    
        .blood p {
            height: 100%;
            /* background: red; */
        }
        /* 小飞机 */
    
        .small {
            width: 50px;
        }
    
        img:not(.boom) {
            width: 100%;
            height: 100%;
        }
        /* 大飞机 */
    
        .big {
            width: 60px;
        }
    
        .big .blood {
            position: absolute;
            left: 0;
            right: 0;
            top: -10px;
            margin: 0 auto;
            height: 4px;
            border-radius: unset;
        }
    
        .blood p {
            height: 100%;
            /* background: red; */
        }
        /* 我军 */
    
        .plane {
            position: absolute;
        }
    	.plane img{
    		transform: rotate(270deg);
    	}
        .plane.small {
            width: 80px;
        }
    
        .plane.big {
            width: 100px;
        }
    
        .biu {
            position: absolute;
        }
    
        .biu.strong1 {
            width: 26px;
            height: 26px;
        }
    
        .biu.strong2 {
            width: 20px;
            height: 20px;
        }
        /* 爆炸图片 */
    
        img.boom {
            position: absolute;
            animation: opa 1s;
        }
    
        @keyframes opa {
            0% {
                opacity: 1;
            }
            25% {
                opacity: 0.5;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        /* prize */
    
        .prize {
            position: absolute;
            width: 50px;
            height: 50px;
            font-size: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px dashed red;
            color: red;
            font-weight: bold;
            animation: prize 1s infinite;
        }
    
        @keyframes prize {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.2);
            }
    
            100% {
                transform: scale(1);
            }
        }
        /* 得分板 */
    
        .score {
            position: absolute;
            top: 0;
            left: 0;
            width: 70px;
            height: 30px;
            color: #fff;
            font-size: 20px;
        }
        /* 记录得分 */
    
        .record {
            width: 60%;
            height: 100px;
            margin: 100px auto;
            background: #000;
            padding: 10px;
            border: 4px double #fff;
            color: #fff;
        }
    
        .record p {
            height: 50px;
            font-size: 40px;
            font-weight: bold;
            text-align: center;
            color: skyblue;
        }
        /* 再来一次 */
    
        .btn {
            position: absolute;
            bottom: 50px;
            right: 0;
            left: 0;
            margin: auto;
            width: 150px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            border-radius: 10px;
            background: #000;
            cursor: pointer;
        }
        </style>
    </head>
    
    <body onselectstart="return false">
        <div id="wrap">
        </div>
        <script>
        (function() {
    
            var wrap = document.getElementById("wrap"),
                speedEnemy = [400, 350, 300, 200],
                wrapWidth = wrap.clientWidth,
                wrapHeight = wrap.clientHeight,
                enePlane = document.getElementsByClassName('enemy'),
                plane = document.getElementsByClassName("plane"),
                prize = document.getElementsByClassName('prize'),
                defaultEne = {
                    big: {
                        width: 260,
                        height: 200,
                        strong: 5 
                    },
                    small: {
                        width: 108,
                        height: 80,
                        strong: 1 
                    }
                },
                defaultPlane = {
                    big: {
                        width: 97,
                        height: 97,
                        filename: 'plane_1.gif'
                    },
                    small: {
                        width: 122,
                        height: 95,
                        filename: 'plane_0.gif'
                    }
                };
    
    
            init() // 初始化界面
    
            function init() {
                var optArr = ['简单模式', '一般模式', '困难模式', '地狱模式'];
    
    
    
                wrap.innerHTML = "";
    
                var h1 = document.createElement('h1');
                h1.innerHTML = '飞机大战进化版';
                wrap.appendChild(h1)
    
                for (var i = 0, len = optArr.length; i < len; i++) {
                    var div = document.createElement('div');
                    div.className = 'option';
                    div.innerHTML = optArr[i];
                    div.i = i;
                    div.onclick = function(e) {
                        startGame(this.i, e)
                    }
                    wrap.appendChild(div)
                }
            }
    
    
            // startGame 开始游戏
            function startGame(idx, e) {
                var mod = ['small', 'big', 'small', 'small'];
                wrap.innerHTML = "";
                wrap.className = 'bg.jpg';
            
                wrap.eneTime = setInterval(function() {
                    enemy(idx, mod[randomArea(0, 3)]) // 
                }, speedEnemy[idx])
    
                
                myPlane(e, idx, 'small')
    
                
                wrap.prizeTime = setInterval(function() {
    
                    createPrize(['爱你', '啵啵'][randomArea(0, 1)])
                }, 5000);
    
    
                
                showScore();
    
                
                var audio = document.createElement('audio');
                audio.src = 'img/game_music.mp3';
                audio.autoplay = true;
                audio.loop = true;
                audio.volume = 0.5;
    
                wrap.appendChild(audio)
    
            }
    
    
    
            // 创建敌军函数
            function enemy(idx, model) {
                
    
                var ene = document.createElement('div'),
                    bloodBorder = document.createElement('div'),
                    blood = document.createElement('p'),
                    img = document.createElement('img');
    
                ene.className = 'enemy ' + model;
                
                ene.model = model;
    
                bloodBorder.className = 'blood';
    
                img.src = 'img/enemy_' + model + '.gif';
    
                img.width = defaultEne[model].width;
                img.height = defaultEne[model].height;
    
                
                ene.style.top = 0;
    
                
                ene.strong = defaultEne[model].strong;
    
               
                ene.speed = randomArea(2, 4);
    
                //
                wrap.appendChild(ene).appendChild(bloodBorder).appendChild(blood);
                ene.appendChild(img)
    
    
                ene.style.left = randomArea(0, wrapWidth - ene.clientWidth) + "px"
    
    
    
    
                eneLanding(); // 敌机生成结束 开始下降
    
    
                function eneLanding() {
                    ene.style.top = ene.offsetTop + ene.speed + "px";
                    if (ene.offsetTop >= wrapHeight - ene.offsetHeight) {
                        
                        wrap.removeChild(ene);
                    } else {
                        
                        if (plane[0] && isDuang(plane[0], ene)) {
    
                            boom(ene);
                            
                            gg();
    
                        } else {
                            plane[0] && requestAnimationFrame(eneLanding)
                        }
    
    
                    }
                }
    
            }
    
            // 创建我军函数
            function myPlane(e, idx, model) {
                
                var maxTop, maxLeft, minLeft;
                var plane = document.createElement('div'),
                    img = document.createElement('img');
    
                img.src = 'img/' + defaultPlane[model].filename;
                img.width = defaultPlane[model].width;
                img.height = defaultPlane[model].height;
    
                plane.className = "plane " + model;
                
                plane.strong = 0;
    
                
                plane.count = 0;
    
                plane.model = model;
    
                wrap.appendChild(plane).appendChild(img);
    
    
                img.onload = function() {
                    plane.style.top = e.pageY - wrap.offsetTop - plane.clientHeight / 2 + 'px';
                    plane.style.left = e.pageX - wrap.offsetLeft - plane.clientWidth / 2 + 'px';
    
    
                   
                    maxTop = wrap.clientHeight - plane.offsetHeight,
                        minLeft = -plane.offsetWidth / 2,
                        maxLeft = wrap.clientWidth + minLeft;
                }
    
    
    
                document.onmousemove = function(e) {
                    var top = e.pageY - wrap.offsetTop - plane.offsetHeight / 2,
                        left = e.pageX - wrap.offsetLeft - plane.offsetWidth / 2;
    
                    top = Math.max(0, top)
                    top = Math.min(maxTop, top)
                    left = Math.max(minLeft, left)
                    left = Math.min(maxLeft, left)
    
                    plane.style.top = top + 'px'
                    plane.style.left = left + 'px';
    
                   
    
                    for (var i = 0, len = prize.length; i < len; i++) {
                        if (isDuang(plane, prize[i])) {
                            
                            if (prize[i].attr === '火') {
                                
                                plane.strong++;
                            } else if (prize[i].attr === '风') {
                                
                                plane.count++;
    
                                if (plane.count > 2) {
                                    alert('知足者常乐');
                                    gg(); 
                                }
                            }
                            
                            clearTimeout(prize[i].time)
                            wrap.removeChild(prize[i])
                        }
                    }
                };
    
    
                // 生成子弹
                var speed = [300, 250, 200, 150][idx], 
                    biuSpd = [4, 5, 6, 7][idx]; 
    
    
                var audio = document.createElement('audio');
                audio.loop = true;
                audio.autoplay = true;
                wrap.appendChild(audio)
    
    
    
    
                plane.time = setInterval(function() {
                    
    
                    for (var i = 0; i <= plane.count; i++) {
                        Biu({
                            strong: plane.strong,
                            count: plane.count,
                            i: i 
                        })
    
                        audio.src = plane.count > 0 ? 'img/enemy2_out.mp3' : 'img/bullet.mp3';
    
                    }
    
    
                }, speed)
    
                function Biu(obj) {
                    var biu = document.createElement('img');
                    biu.src = 'img/fire.png';
                    biu.className = 'biu strong1';
                    biu.strong = 1 + plane.strong; 
                    biu.count = 1 + plane.count; 
    
                    wrap.appendChild(biu);
                    biu.style.top = plane.offsetTop + 'px';
    
    
                    if (obj.count === 0) {
                       
                        biu.style.left = plane.offsetLeft + plane.offsetWidth / 2 - biu.offsetWidth / 2 + "px";
                    } else if (obj.count === 1) {
                        
                        biu.style.left = [plane.offsetLeft, plane.offsetLeft + plane.offsetWidth - biu.offsetWidth][obj.i] + 'px';
                    } else if (obj.count === 2) {
                       
                        biu.style.left = [plane.offsetLeft, plane.offsetLeft + plane.offsetWidth / 2 - biu.offsetWidth / 2, plane.offsetLeft + plane.offsetWidth - biu.offsetWidth][obj.i] + 'px';
                    }
                    runBiu();
    
                    function runBiu() {
                        biu.style.top = biu.offsetTop - biuSpd + "px";
                        if (biu.offsetTop <= 0) {
                            wrap.removeChild(biu);
                        } else {
    
                            
                            plane.parentNode && (biu.time = requestAnimationFrame(runBiu))
    
                            for (var i = 0, len = enePlane.length; i < len; i++) {
    
                                if (enePlane[i] && isDuang(biu, enePlane[i])) {
    
                                    cancelAnimationFrame(biu.time)
                                   
                                    wrap.removeChild(biu);
                                    enePlane[i].strong -= biu.strong;
                                   
    
                                    enePlane[i].children[0].children[0].style.width = enePlane[i].strong / defaultEne[enePlane[i].model].strong * enePlane[i].children[0].clientWidth + "px";
    
                                    if (enePlane[i].strong <= 0) {
                                        if (enePlane[i].model === 'small') {
                                            wrap.score++;
                                        } else if (enePlane[i].model === 'big') {
                                            wrap.score += 4;
    
                                        }
                                        boom(enePlane[i]);
    
                                        document.getElementsByClassName('score')[0].innerHTML = wrap.score;
                                    }
    
    
                                }
                            }
    
    
    
                        }
                    }
    
    
                }
            }
    
            function boom(obj) {
                var img = document.createElement('img');
                img.src = 'img/boom_' + obj.model + '.gif';
                img.width = obj.clientWidth + 10;
                img.height = obj.clientHeight + 10;
                img.className = 'boom';
                img.style.top = obj.offsetTop + "px";
                img.style.left = obj.offsetLeft + "px";
    
    
                wrap.removeChild(obj);
    
    
                wrap.appendChild(img);
                
                img.addEventListener('webkitAnimationEnd', function() {
                    wrap.removeChild(this)
                })
    
                var audio = document.createElement('audio');
                audio.loop = false;
                audio.autoplay = true;
                audio.src = obj.className === 'enemy' ? 'img/enemy3_down.mp3' : 'img/game_over.mp3'
                audio.volume = 0.5;
    
                audio.addEventListener('ended', function() {
                    wrap.removeChild(this);
                });
    
                wrap.appendChild(audio)
            }
            function isDuang(obj1, obj2) { // true 碰撞  false 不碰撞
                var top1 = obj1.offsetTop,
                    left1 = obj1.offsetLeft,
                    right1 = left1 + obj1.offsetWidth,
                    bottom1 = top1 + obj1.offsetHeight,
    
                    top2 = obj2.offsetTop,
                    left2 = obj2.offsetLeft,
                    right2 = left2 + obj2.offsetWidth,
                    bottom2 = top2 + obj2.offsetHeight;
    
                return !(top1 > bottom2 || left1 > right2 || bottom1 < top2 || right1 < left2)
            }        
            function randomArea(a, b) {
                return Math.floor(Math.random() * (b + 1 - a) + a);
            }
            // GG 游戏结束
            function gg() {
                // 注销document的move事件
                document.onmousemove = null;
                // 关闭生产敌军的定时器
                clearInterval(wrap.eneTime)
                // 关闭生成子弹的定时器
                clearInterval(plane[0].time)
                // 清除生成奖品的定时器
                clearInterval(wrap.prizeTime)
                // 我军的爆炸效果 && 删除我军
                boom(plane[0])
                // 统计得分情况
                setTimeout(ggView, 1000)
            }
            //  火 = 增加威力   风 = 增加子弹的条数
            function createPrize(inner) {
                var div = document.createElement('div');
                div.innerHTML = inner;
                div.className = 'prize';
                
                div.attr = inner;
    
                div.style.top = randomArea(0, wrapHeight - 50) + 'px';
                div.style.left = randomArea(0, wrapWidth - 50) + 'px';
    
                wrap.appendChild(div);
                div.time = setTimeout(function() {
                    wrap.removeChild(div)
                }, 5000)
            }       
            function ggView() {
                // 清屏
                wrap.innerHTML = "";
                // 创建游戏结束画面的两个对象
                
                var div = document.createElement('div'),
                    div2 = document.createElement('div');
                div.className = 'record';
                div.innerHTML = "最终得分:<p>" + wrap.score + "</p>"
                div2.className = "btn";
                div2.innerHTML = '再来一次';
                div2.onclick = function() {
                    init();
                }
                wrap.appendChild(div)
                wrap.appendChild(div2)
            }
            // showScore  初始化开始几分
            function showScore() {
                var span = document.createElement('span');
                span.innerHTML = wrap.score = 0;
                span.className = 'score';
                wrap.appendChild(span);
            }
        })()
        </script>
    </body>
    
    </html>
    

    说明

    鉴于代码片段稍长,这里我就上传了一个HTML,剩下的所有文件,我已经放到“资源”中啦!欢迎大家下载!

    展开全文
  • HTML网页代码大全

    千次阅读 2021-06-10 06:10:44
    1)贴图:2)加入连接:写上你想写的字1)贴图:2)加入连接:写上你想写的字3)在新窗口打开连接:写上要写的字消除连接的下划线在新窗口打开连接:写上你想写的字4)移动字体(走马灯):写上你想写的字5)字体加粗:写上你...

    1)贴图:%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9D%80

    2)加入连接:写上你想写的字

    1)贴图:%E5%9B%BE%E7%89%87%E5%9C%B0%E5%9D%80

    2)加入连接:写上你想写的字

    3)在新窗口打开连接:写上要写的字

    消除连接的下划线在新窗口打开连接:

    写上你想写的字

    4)移动字体(走马灯):写上你想写的字

    5)字体加粗:写上你想写的字

    6)字体斜体:写上你想写的字

    7)字体下划线: 写上你想写的字

    8)字体删除线: 写上你想写的字

    9)字体加大: 写上你想写的字

    10)字体控制大小:

    写上你想写的字

    (其中字体大小可从h1-h5,h1最大,h5最小)

    11)更改字体颜色:写上你想写的字(其中value值在000000与ffffff(16位进制)之间

    12)消除连接的下划线:写上你想写的字

    13)贴音乐:

    14)贴flash:

    15)贴影视文件:

    16)换行:

    17)段落:

    段落

    18)原始文字样式:

    正文

    19)换帖子背景:

    20)固定帖子背景不随滚动条滚动:

    bgproperties=fixed>

    21)定制帖子背景颜色:

    (value值见10)

    22)帖子背景音乐:

    23)贴网页:

    展开全文
  • 怀旧小游戏,简单HTML实现,可下载修改代码调整难度,增加关卡,优化画面等等,学习代码也有欢乐~玩起来! 软件架构 html、JavaScript、css 使用说明 下载完整源码【文末附下载地址】 点击HTML文件运行...

    HTML怀旧小游戏

    介绍

    超级玛丽、飞机大战、赛车、俄罗斯方块、飞翔的鸟、王校长热狗飞机大战、植物大战僵尸、冒险岛、塔块游戏、五子棋、贪吃蛇

    怀旧小游戏,简单HTML实现,可下载修改代码调整难度,增加关卡,优化画面等等,学习代码也有欢乐~玩起来!

    软件架构

    html、JavaScript、css

    使用说明

    1. 下载完整源码【文末附下载地址】

    2. 点击HTML文件运行即可

    游戏操作指南

    w a s d 或者 ↑ ↓ ← → 或者 移动鼠标

    游戏展示

    超级玛丽

    图片

    飞机大战

    图片

    赛车

    图片

    俄罗斯方块

    图片

    飞翔的鸟

    图片

    王校长热狗飞机大战

    图片

    植物大战僵尸

    图片

    冒险岛

    图片

    塔块游戏

    图片

    五子棋

    图片

    贪吃蛇

    图片

    往期相关推荐

    Html5+CSS3+JS代码实现圣诞节动态表白特效,祝你成功!

    200行Html5+CSS3+JS代码实现动态圣诞树

    基于HTML+CSS+JS的高端3D相册【完整项目源码】

    源码下载

    Gitee代码仓库下载地址:

    https://gitee.com/javanoteany/html_games.git

    感谢有你!点赞评论+关注

    展开全文
  • html5 canvas+js贪吃蛇网页小游戏代码

    千次阅读 2022-03-28 11:12:05
    html5 canvas+js贪吃蛇网页小游戏代码 注解都在代码里了,自己理解吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
  • HTML5拼图游戏代码

    热门讨论 2014-04-28 11:15:38
    现在HTML5大热,但看了很多介绍,都是重点介绍CANVAS而相对忽略了SVG,我个人感觉这两个技术结合,优势互补,利用SVG的交互性和CANSVAS的绘图能力,才能更好地发挥各自的作用。 以前用纯SVG做到一个拼图的DEMO,...
  • 最近因为帮助大一的学妹做网页,又接触了一下前端方面的知识。(学妹已经成了女朋友!!!,嘻嘻)感谢自己当年认真学习,大三了好多东西还能拾起来,哈哈。...大一手敲着不知道为什么的代码,一遍一遍...
  • <...HTML5跑酷小游戏代码</title> <link rel="stylesheet" href="kandi.css" type="text/css" media="screen"> </head> <body> <h3>按空格键跳跃</h3> <.
  • HTML贪吃蛇小游戏源码

    千次阅读 2020-03-10 18:23:17
    DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> #map { width: 400px; height: 400px; border: 1px solid ...
  • HTML5实现的推箱子小游戏代码

    热门讨论 2012-03-09 10:19:07
    HTML5实现的推箱子小游戏,含源代码。在firefox7和chrome11下测试通过。共100关。可用于学习HTML5或个人娱乐。
  • 这款《一个都不能死》小游戏html源码可以让我们锻炼反应能力和手速,玩家可以选择4种模式,这四种模式难度由高到低分别是:炼狱模式、地狱模式、噩梦模式和默认的普通模式,这几种模式分别对应了不同的需要进行的...
  • html简单写了一个小游戏

    千次阅读 2020-04-29 19:48:59
    效果图 点击变长出现棍子,小人跑过去,如果跑不过去看广告复活
  • 200个HTML5微信小游戏源码

    热门讨论 2017-12-07 15:30:52
    200个HTML5小游戏源码,需要的可以下载,各种类型,支持售后
  • HTML打地鼠小游戏代码

    千次阅读 2019-07-08 17:25:17
    超简单实用的打地鼠代码,话不多说,直接看代码。 var win = this.getWindow(); var me = this; win.resetGame(); //变量初始化 win.gameOver = initData; win.initVar = function(){ win.score = 0; win.countDown ...
  • HTML+js实现贪吃蛇小游戏(内含完整代码

    千次阅读 多人点赞 2022-01-07 09:33:49
    贪吃蛇小游戏用js和html如何实现,一步一步教会你......
  • 贪吃蛇html游戏代码

    千次阅读 2022-03-23 14:00:30
    贪吃蛇html游戏代码 拿来即用! 代码如下 <!DOCTYPE html> html> <head> <meta charset="UTF-8"> 贪吃蛇</title> <style> #map { width: 400px; height: 400px;...................
  • Html5游戏平台源码,40款h5小游戏和多款有趣的测试。在浏览器可以直接运行。包含包括答题问卷、积分赚取、抽奖、找你妹,跑酷、2048、小鸟飞飞、飞的更高、一个都不能死......等,对与要写H5小游戏或者微信公众号...
  • 背景:作为一个python小白,今天从菜鸟教程上看了一些python的教程,看到了python的一些语法,对比起来(有其他语言功底),感觉还是非常有趣,就随手添了一点内容,改了一个例程,当着练练手,从一些例子入门...
  • HTML写的整人小游戏(一)之 奔跑的no

    万次阅读 多人点赞 2016-10-27 10:27:57
    这个小游戏是无意间看到的,觉得很有意思,所以拿出来和大家一起分享lei 基本界面就是下面的,以后希望能做更多的出来分享!谢谢你们、 <!DOCTYPE html> <html> <head> <meta charset=...
  • HTML5珠子走出迷宫小游戏代码

    千次阅读 2022-04-16 19:03:48
    使用左键、右键和上箭头键移动。 地图数据是完全可定制和可编写脚本(全部包含在“地图”的变量)。...HTML5珠子走出迷宫小游戏代码</title> <style> * { margin: 0; padding: 0; } body ...
  • 谷歌断网小游戏代码粗略解析

    千次阅读 2021-06-28 23:22:36
    当我们使用谷歌浏览器时,碰到断网的情况,就会看到一个小恐龙加上断网提示语的界面。...这个小游戏从2014年9月发布以来就受到了很多人得喜爱,目前为止有超过2.7亿的月活量。如此小巧精致的一个游戏,想必其实现
  • js代码实现小游戏

    千次阅读 2020-09-17 11:35:45
    html> <body> <canvas id="myCanvas" width="800" height="600"></canvas> <script> let canvas = document.getElementById("myCanvas"); let context = canvas.getContext("2d"); ...
  • Python炸弹人小游戏代码

    千次阅读 2022-03-31 15:09:10
    Python炸弹人小游戏代码,使用键盘方向键移动小人,按空格放置炸弹,通过巧妙的放置炸弹来获得道具或消灭敌人。程序运行截图: 核心代码: ''' Function: 炸弹人小游戏 Author: Charles 微信公众号: Python...
  • 10款超炫HTML5游戏游戏源码

    万次阅读 多人点赞 2017-06-05 21:42:06
    编为各位宅在家里的朋友分享10款超炫HTML5游戏,让我们在不仅获得快乐的同时又可以学到新鲜的HTML5知识,一起来看看吧。1、HTML5版切水果游戏 HTML5游戏极品这是一款由百度JS小组提供的HTML5版切水果游戏,记得切...
  • HTML5游戏模板具有即用型设计和功能。... 无论您是已经要构建游戏概念,还是想通过有趣的方式来学习有关制作手机游戏的更多信息,请立即下载源代码。 1. 《 Indiara and Skull Gold》是一款具有印第安纳·琼...
  • HTML5网页小游戏HTML5、CSS、JS)

    千次阅读 2022-03-24 20:17:34
    主要游戏页面: 主要代码: 下载链接:https://download.csdn.net/download/weixin_49861340/85020269

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 153,784
精华内容 61,513
关键字:

html小游戏代码