Grided Canvas Side-Scroller Game Engine

Developer
Charlie Volpe
Size
4,366 Kb
Views
6,072
  1. Grided Canvas Side-Scroller Game Engine Previews
  2. Grided Canvas Side-Scroller Game Engine HTML Codes
  3. Grided Canvas Side-Scroller Game Engine CSS Codes
  4. Grided Canvas Side-Scroller Game Engine JS Codes

How do I make an grided canvas side-scroller game engine?

This is something I was working on to test out Canvas as a game platform. I have loved side-scrollers since I was a kid and thought this would be a fun test.. What is a grided canvas side-scroller game engine? How do you make a grided canvas side-scroller game engine? This script and codes were developed by Charlie Volpe on 08 November 2022, Tuesday.

Grided Canvas Side-Scroller Game Engine Previews
IQ Test

Grided Canvas Side-Scroller Game Engine - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grided Canvas Side-Scroller Game Engine</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="canvas-wrapper"> <canvas id="canvas" width="2000" height="1200"></canvas>
</div>
<!--<div class="touch-controls clearfix"> <div id="left" class="touch-button">A - Left</div> <div id="up" class="touch-button">W - Up</div> <div id="down" class="touch-button">S - Down</div> <div id="right" class="touch-button">D - Right</div>
</div>-->
<p id="info">Use 'WASD' for movement on computer.<br>Currently can't be controlled by touch - I will update this as I go.</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Grided Canvas Side-Scroller Game Engine - Script Codes CSS Codes

/*
* This is a project to test out Canvas as a game engine.
* This is a work in progress... I will be adding to it...
* Feel free to use the code but please give me credit.
* Created by Charlie Volpe -- http://charlievolpe.com
*
* TODO:
* - Make camera flip smoother...
* - Camera follow should follow up and down as well...
* - Add in Touch Controls for Phone...
* - Add textures
* - Add animation
*
* - Do inline TODO's
*
* - Make game out of this engine
*/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
#canvas-wrapper { width: 90%;
}
#canvas{ width: 100%; height: 100%; margin: 2em 5%; border: 2px solid #333;
}
#info { text-align: center; padding: 0 5%;
}
.touch-controls { width: 90%; margin: 0 auto;
}
.touch-button { cursor: pointer; box-sizing: border-box; color: white; font-size: 1.5em; float: left; width: 25%; text-align: center; background: #ababab; padding: 1.5em 0; border: .5em solid white; border-radius: 1em;
}
.touch-button:hover { background: #202020;
}

Grided Canvas Side-Scroller Game Engine - Script Codes JS Codes

// Init Canvas Setup
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// Init Grid Setup
var columns = 40;
var rows = 12;
var gridView = {"x":0,"y":0,"width":20,"height":12};
var unitSize = Math.floor(canvas.width/ gridView["width"]);
// Function that extends a parent class
function extend( ChildClass, ParentClass) { ChildClass.prototype = new ParentClass(); ChildClass.prototype.constructor = ChildClass;
}
// Init Grid Unit
var Unit = function() { this.type = 'void'; this.color = '#34abfa'; this.x = 0; this.y = 0; this.w = 1; this.h = 1;
};
// Create Unit Methods
Unit.prototype = { getType:function() { return this.color; }, setType:function(str) { this.type = str; }, getColor:function() { return this.color; }, setColor:function(str) { this.color = str; }, getX:function() { return this.x; }, setX:function(i) { this.x = i; }, getY:function() { return this.y; }, setY:function(i) { this.y = i; }, getW:function() { return this.w; }, setW:function(i) { this.w = i; }, getH:function() { return this.h; }, setH:function(i) { this.h = i; }
};
// Init Player Unit
var Player = function() { this.type = 'player'; this.color = '#f7f7f7'; this.x = 0; this.y = 5; this.h = 2;
};
// Init Ground Unit
var Ground = function() { this.type = 'solid'; this.color = '#bf8028';
}
// Init Ladder Unit
var Ladder = function() { this.type = 'climb'; this.color = '#ababab';
}
// Extend Classes
extend(Player, Unit);
extend(Ground, Unit);
extend(Ladder, Unit);
// Unit DrawSelf Method
Unit.prototype.drawSelf = function(gridView) { context.fillStyle = this.color; var unitXPos = (this.x - gridView["x"]) * unitSize; var unitYPos = (this.y - gridView["y"]) * unitSize; var unitWidth = this.w * unitSize; var unitHeight = this.h * unitSize; context.fillRect(unitXPos, unitYPos, unitWidth, unitHeight);
};
// Build a Blank Grid
function buildInitGrid(columns, rows) { var grid = []; for( var i=0; i<columns; i++ ) { var row = []; for( var j=0; j<rows; j++ ) { var unit = new Unit(); unit.setX(i); unit.setY(j); row.push(unit); } grid.push(row); } return grid;
};
// Push a List of Objects to the Grid -- Static only, not Player...
function pushToGrid(grid, objs) { objs.forEach(function(obj) { for( var i=0; i<obj.getW(); i++ ) { for( var j=0; j<obj.getH(); j++) { grid[obj.x + i][obj.y + j] = obj; } } })
};
// Draws Every Individual Grid Unit
function drawGrid(grid) { grid.forEach(function(r) { r.forEach(function(c) { c.drawSelf(gridView); }); });
};
// Instantiate Grid, Player and Objects
var gameGrid = buildInitGrid(columns, rows);
var player = new Player();
var ground1 = new Ground();
ground1.setY(7);
ground1.setW(13);
ground1.setH(5);
var ladder1 = new Ladder();
ladder1.setX(13);
ladder1.setY(7);
ladder1.setH(5);
// Init Objects List and Push Objects to it
var gameObjs = [];
gameObjs.push(ground1);
gameObjs.push(ladder1);
// Push List to Grid
pushToGrid(gameGrid, gameObjs);
// Checks if Player Will Collide on Next Move
function checkCollide(direction) { var collide = false; // Check collide left if( player.x > 0 && direction == "left") { // TODO: Loop Thru Height if( gameGrid[player.x - 1][player.y].type == "solid" || gameGrid[player.x - 1][player.y + (player.h - 1)].type == "solid") { collide = true; } } // Check collide right else if( player.x < columns -1 && direction == "right"){ // TODO: Loop Thru Height if( gameGrid[player.x + 1][player.y].type == "solid" || gameGrid[player.x + 1][player.y + (player.h - 1)].type == "solid") { collide = true; } } return collide;
}
// Draw Function That is Called When There is a Change
function draw() { context.clearRect(0,0,canvas.width,canvas.height); drawGrid(gameGrid); player.drawSelf(gridView);
};
// Call Draw Once to Have it Blit to the Screen Initially
draw();
// KeyStrokes
$(function () { $(document).keydown(function (e) { var initialPlayerX = player.x; var initialPlayerY = player.y; // 'a' keycode if( e.keyCode == 65 ) { if( player.x > 0 && !checkCollide("left") ) { // Player movement player.setX(initialPlayerX - 1); // Camera movement if( gridView["x"] != 0 ) { if( player.x == (gridView["x"] + gridView["width"]) - 6) { gridView["x"]--; } else if( player.x < (gridView["x"] + gridView["width"]) - 6) { if( player.x < gridView["width"] - 5) { gridView["x"] = 0; } else { gridView["x"] = player.x - (gridView["width"] - 5); } } } } } // 'w' keycode else if( e.keyCode == 87) { if( gameGrid[player.x][player.y +(player.h -1)].type == "climb") { player.setY(initialPlayerY - 1); } } // 's' keycode else if( e.keyCode == 83) { var belowPlayer = gameGrid[player.x][(player.y + player.h)]; if( (player.y + player.h) < rows ) { if( belowPlayer.type == 'climb' ) { player.setY(player.y + 1); } } } // 'd' keycode else if( e.keyCode == 68 ) { if( player.x < ( columns - 1) && !checkCollide("right") ) { // Player movement player.setX(initialPlayerX + 1); // Camera movement if( (gridView["x"] + gridView["width"]) < columns ) { if( player.x == gridView["x"] + 5) { gridView["x"]++; } else if( player.x > gridView["x"] + 5) { if( player.x + (gridView["width"] - 4) > columns) { gridView["x"] = columns - gridView["width"]; } else { gridView["x"] = player.x - 4; } } } } } // 'spacebar' keycode else if( e.keyCode == 32) { } // Draws Every Time There is a Keydown Event draw(); });
});
$(document).mouseup(function() { clearInterval(timeout_left); clearInterval(timeout_right); clearInterval(timeout_up); return false;
})
// Update Function Set to 24 Frames a Second
setInterval( function() { update();
}, 1000/24);
// Called Every Frame
function update() { // Checks if the Player Should Be Falling var belowPlayer = gameGrid[player.x][(player.y + player.h)]; if( (player.y + player.h) < rows ) { if( belowPlayer.type == 'void' ) { player.setY(player.y + 1); draw(); } }
};
Grided Canvas Side-Scroller Game Engine - Script Codes
Grided Canvas Side-Scroller Game Engine - Script Codes
Home Page Home
Developer Charlie Volpe
Username charlie-volpe
Uploaded November 08, 2022
Rating 3
Size 4,366 Kb
Views 6,072
Do you need developer help for Grided Canvas Side-Scroller Game Engine?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Charlie Volpe (charlie-volpe) Script Codes
Name
Simple Blackjack Game
Animated Menu Circles
Heart Shaped Games Redesign
Draggable Node Based VPL Test
Layout Resolutions
RGBA Long Form to Decimal Converter
Draggable Finder Window Visualization
Modal Window Test Animations
NES Contoller
Full Site Redesign
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!